import React, { useEffect } from 'react';
import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonButton, IonIcon, IonBadge } from '@ionic/react';
import { trash, refresh } from 'ionicons/icons';
import { useOllama } from '../../hooks/useOllama';

const ModelListing: React.FC = () => {
  const { models, isLoading, error, refreshModels, deleteModel } = useOllama();

  useEffect(() => {
    refreshModels();
  }, [refreshModels]);

  const handleDeleteModel = async (modelName: string) => {
    try {
      await deleteModel(modelName);
      await refreshModels();
    } catch (error) {
      console.error('Failed to delete model:', error);
    }
  };

  return (
    <IonCard>
      <IonCardHeader>
        <div className="flex justify-between items-center">
          <IonCardTitle>Model Listing</IonCardTitle>
          <IonButton
            size="small"
            onClick={() => refreshModels()}
            disabled={isLoading}
          >
            <IonIcon slot="start" icon={refresh} />
            Refresh
          </IonButton>
        </div>
      </IonCardHeader>
      <IonCardContent>
        <div className="space-y-4">
          {/* Error Display */}
          {error && (
            <div className="alert alert-error">
              <span>{error}</span>
            </div>
          )}

          {/* Models Table */}
          <div className="overflow-x-auto">
            <table className="table w-full">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Size</th>
                  <th>Modified</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {models.map((model) => (
                  <tr key={model.name}>
                    <td>{model.name}</td>
                    <td>{model.size}</td>
                    <td>{model.modified}</td>
                    <td>
                      <IonButton
                        color="danger"
                        size="small"
                        onClick={() => handleDeleteModel(model.name)}
                        disabled={isLoading}
                      >
                        <IonIcon slot="icon-only" icon={trash} />
                      </IonButton>
                    </td>
                  </tr>
                ))}
                {models.length === 0 && (
                  <tr>
                    <td colSpan={4} className="text-center">
                      No models available
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>

          {/* Loading Indicator */}
          {isLoading && (
            <div className="flex justify-center">
              <div className="loading loading-spinner loading-lg text-primary"></div>
            </div>
          )}

          {/* Help/Info Section */}
          <div className="mt-4 p-4 bg-base-200 rounded-lg">
            <h3 className="text-lg font-semibold mb-2">Help & Information</h3>
            <p className="text-sm">
              View and manage your installed models. You can see details like size and
              modification date, and remove models that are no longer needed.
            </p>
            <div className="mt-2">
              <IonBadge color="primary" className="mr-2">Total Models: {models.length}</IonBadge>
            </div>
          </div>
        </div>
      </IonCardContent>
    </IonCard>
  );
};

export default ModelListing; 